<template>
	<div id="bugList">
		<el-row>
			<el-col :span="24">
				<div class="grid-content bg-purple-light">
					<span id="anoselect">筛选查询</span>
					<span id="selectTime">登记时间</span>
					<div class="block" id="startTime">
						<el-date-picker v-model="param.startTime" type="date" placeholder="选择日期"
							value-format="yyyy-MM-dd" size="small" id="date1">
						</el-date-picker>
					</div>
					<span id="symbol">~</span>
					<div class="block" id="endTime">
						<el-date-picker v-model="param.endTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
							size="small">
						</el-date-picker>
					</div>
					<span id="project">项目</span>
					<select class="selectBox" v-model="param.projectName">
						<option v-for="pro in projectName">{{pro.projectName}}</option>
					</select>
					<span id="status">状态</span>
					<select class="selectBox" v-model="param.status">
						<option v-for="state in status">{{state.bugstateDetail}}</option>
					</select>
					<el-button size="mini" id="btn1" @click="selectBugBy()">查询</el-button>
					<el-button size="mini" id="btn2" @click="dialogFormVisible = true">新增</el-button>
					<el-dialog title="新增任务" :visible.sync="dialogFormVisible">
						<el-form :model="form">
							<el-form-item label="项目名称" :label-width="formLabelWidth">
								<el-select v-model="form.projectName" placeholder="请选择项目名称">
									<el-option :label=pro.projectName :value=pro.projectName v-for="pro in projectName">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="缺陷名称" :label-width="formLabelWidth">
								<el-input v-model="form.bugName" autocomplete="off" placeholder="请输入缺陷名称"></el-input>
							</el-form-item>
							<el-form-item label="缺陷描述" :label-width="formLabelWidth">
								<el-input v-model="form.bugDetail" type="textarea" :rows="2" autocomplete="off"
									placeholder="请输入缺陷描述"></el-input>
							</el-form-item>
							<el-form-item label="缺陷分类" :label-width="formLabelWidth">
								<el-select v-model="form.bugClassify" placeholder="请选择缺陷分类">
									<el-option :label=cla.classifyDetail :value=cla.classifyDetail
										v-for="cla in classify">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="严重程度" :label-width="formLabelWidth">
								<el-select v-model="form.degree" placeholder="请选择严重程度">
									<el-option :label=level.buglevelDetail :value=level.buglevelDetail
										v-for="level in levels">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="优先级" :label-width="formLabelWidth">
								<el-select v-model="form.bugPriority" placeholder="请选择优先级">
									<el-option :label=priority.priorityDetail :value=priority.priorityDetail
										v-for="priority in prioritys">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="预计工时" :label-width="formLabelWidth">
								<el-input v-model="form.ptime" autocomplete="off" placeholder="请输入预计工时"></el-input>
							</el-form-item>
							<el-form-item label="计划开始与结束" :label-width="formLabelWidth">
								<div class="block">
									<el-date-picker v-model="startAndEndTime" type="daterange" range-separator="至"
										start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
										format="yyyy-MM-dd">
									</el-date-picker>
								</div>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
							<el-button type="primary" @click="dialogFormVisible = false;insertBug()">新 增</el-button>
						</div>
					</el-dialog>
					<el-button size="mini" id="btn3" @click="deletebug()">删除</el-button>
				</div>
			</el-col>
		</el-row>
		<el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="40"></el-table-column>
			<el-table-column prop="bugId" label="编号" width="50">
			</el-table-column>
			<el-table-column prop="projectName" label="项目名称" width="130">
			</el-table-column>
			<el-table-column prop="bugName" label="任务名称" width="130">
			</el-table-column>
			<el-table-column prop="bugPriority" label="优先级" width="100">
			</el-table-column>
			<el-table-column prop="degree" label="严重程度" width="100">
			</el-table-column>
			<el-table-column prop="bugClassify" label="缺陷分类" width="100">
			</el-table-column>
			<el-table-column prop="dostate" label="状态" width="100">
			</el-table-column>
			<el-table-column prop="dealName" label="指派" width="100">
			</el-table-column>
			<el-table-column prop="pendtime" label="计划完成时间" width="120">
			</el-table-column>
			<el-table-column label="操作" width="110">
				<template slot-scope="scope">
					<el-button @click="handleClick(scope.row);dialogFormVisible2 = true" type="text" size="small">查看
					</el-button>
					<el-dialog title="查看任务" :visible.sync="dialogFormVisible2">
						<el-form :model="showform">
							<el-form-item label="项目名称" :label-width="formLabelWidth">
								<span>{{showform.projectName}}</span>
							</el-form-item>
							<el-form-item label="缺陷名称" :label-width="formLabelWidth">
								<span>{{showform.bugName}}</span>
							</el-form-item>
							<el-form-item label="缺陷描述" :label-width="formLabelWidth">
								<span>{{showform.bugDetail}}</span>
							</el-form-item>
							<el-form-item label="缺陷分类" :label-width="formLabelWidth">
								<span>{{showform.bugClassify}}</span>
							</el-form-item>
							<el-form-item label="严重程度" :label-width="formLabelWidth">
								<span>{{showform.degree}}</span>
							</el-form-item>
							<el-form-item label="优先级" :label-width="formLabelWidth">
								<span>{{showform.bugPriority}}</span>
							</el-form-item>
							<el-form-item label="预计工时" :label-width="formLabelWidth">
								<span>{{showform.ptime}}</span>
							</el-form-item>
							<el-form-item label="计划开始与结束" :label-width="formLabelWidth">
								<div class="block">
									<span>开始时间:{{showform.pstartetime}}</span>
									<span style="margin-left: 10px;">结束时间:{{showform.pendtime}}</span>
								</div>
							</el-form-item>
						</el-form>
					</el-dialog>
					<el-button type="text" size="small" @click="dialogFormVisible1 = true;changeValue(scope.row)"
						v-if="scope.row.dostate != '已完成'">修改</el-button>
					<el-dialog title="新增任务" :visible.sync="dialogFormVisible1">
						<el-form :model="updateform">
							<el-form-item label="项目名称" :label-width="formLabelWidth">
								<el-select v-model="updateform.projectName" placeholder="请选择项目名称">
									<el-option :label=pro.projectName :value=pro.projectName v-for="pro in projectName">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="缺陷名称" :label-width="formLabelWidth">
								<el-input v-model="updateform.bugName" autocomplete="off" placeholder="请输入缺陷名称">
								</el-input>
							</el-form-item>
							<el-form-item label="缺陷描述" :label-width="formLabelWidth">
								<el-input v-model="updateform.bugDetail" type="textarea" :rows="2" autocomplete="off"
									placeholder="请输入缺陷描述"></el-input>
							</el-form-item>
							<el-form-item label="缺陷分类" :label-width="formLabelWidth">
								<el-select v-model="updateform.bugClassify" placeholder="请选择缺陷分类">
									<el-option :label=cla.classifyDetail :value=cla.classifyDetail
										v-for="cla in classify">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="严重程度" :label-width="formLabelWidth">
								<el-select v-model="updateform.degree" placeholder="请选择严重程度">
									<el-option :label=level.buglevelDetail :value=level.buglevelDetail
										v-for="level in levels">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="优先级" :label-width="formLabelWidth">
								<el-select v-model="updateform.bugPriority" placeholder="请选择优先级">
									<el-option :label=priority.priorityDetail :value=priority.priorityDetail
										v-for="priority in prioritys">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="预计工时" :label-width="formLabelWidth">
								<el-input v-model="updateform.ptime" autocomplete="off" placeholder="请输入预计工时">
								</el-input>
							</el-form-item>
							<el-form-item label="计划开始与结束" :label-width="formLabelWidth">
								<div class="block">
									<el-date-picker v-model="upStartAndEndTime" type="daterange" range-separator="至"
										start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
										format="yyyy-MM-dd">
									</el-date-picker>
								</div>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
							<el-button type="primary" @click="dialogFormVisible = false;updateBug(scope.row.bugId)">修 改
							</el-button>
						</div>
					</el-dialog>
				</template>
			</el-table-column>
		</el-table>
		<el-row style="margin-top: 20px;">
			<el-col :span="24">
				<div class="grid-content bg-purple-light">
					<div class="block" style="margin-left: 350px;">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page=page.current :page-sizes="[5,8,10]" :page-size=page.size
							layout="total, sizes, prev, pager, next, jumper" :total=page.total>
						</el-pagination>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import $ from 'jquery'
	export default {
		data: function() {
			return {
				tableData: [],
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
				},
				param: {
					startTime: '',
					endTime: '',
					projectName: '',
					status: ''
				},
				projectName: [],
				status: [],
				classify: [],
				levels: [],
				prioritys: [],
				dialogFormVisible: false,
				dialogFormVisible1: false,
				dialogFormVisible2: false,
				multipleSelection: [],
				form: {
					projectName: '',
					bugName: '',
					bugDetail: '',
					bugClassify: '',
					degree: '',
					bugPriority: '',
					ptime: '',
					pstartetime: '',
					pendtime: ''
				},
				updateform: {
					bugId: '',
					projectName: '',
					bugName: '',
					bugDetail: '',
					bugClassify: '',
					degree: '',
					bugPriority: '',
					ptime: '',
					pstartetime: '',
					pendtime: ''
				},
				showform: {
					bugId: '',
					projectName: '',
					bugName: '',
					bugDetail: '',
					bugClassify: '',
					degree: '',
					bugPriority: '',
					ptime: '',
					pstartetime: '',
					pendtime: ''
				},
				startAndEndTime: [],
				upStartAndEndTime: [],
				formLabelWidth: '120px',
				page: {
					current: 1,
					size: 5,
					pages: 0,
					total: 0,
					records: []
				},
				deleteparam:[]
			}
		},
		methods: {
			handleClick(row) {
				console.log(row);
				this.showform = row;
				console.log(this.showform);
			},
			selectAllBugs: function() {
				this.page.current = 1;
				var _this = this;
				$.ajax({
					url: "http://localhost/bugList/select",
					type: "get",
					headers: {
						"token": localStorage.getItem("token")
					},
					data: {
						"pageNum": _this.page.current,
						"pageSize": _this.page.size
					},
					dataType: "json",
					success: function(data) {
						_this.tableData = data.list;
						_this.page = data.obj;
						console.log(data);
					}
				})
			},
			selectBugBy: function() {
				console.log(this.page);
				var _this = this;
				$.ajax({
					url: "http://localhost/bugList/select",
					type: "get",
					headers: {
						"token": localStorage.getItem("token")
					},
					data: {
						"pageNum": _this.page.current,
						"pageSize": _this.page.size,
						"startTime": _this.param.startTime,
						"endTime": _this.param.endTime,
						"projectName": _this.param.projectName,
						"status": _this.param.status
					},
					dataType: "json",
					success: function(data) {
						_this.tableData = data.list;
						_this.page = data.obj;
						console.log(data);
					}
				})
			},
			selectProject: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost/buttonStatement/showProject",
					type: "get",
					headers: {
						"token": localStorage.getItem("token")
					},
					success: function(data) {
						_this.projectName = data.list;
					}
				})
			},
			selectState: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost/buttonStatement/bugstate",
					type: "get",
					headers: {
						"token": localStorage.getItem("token")
					},
					success: function(data) {
						_this.status = data.list;
					}
				})
			},
			selectClassify: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost/buttonStatement/bugclassify",
					type: "get",
					headers: {
						"token": localStorage.getItem("token")
					},
					success: function(data) {
						_this.classify = data.list;
					}
				})
			},
			selectLevels: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost/buttonStatement/buglevel",
					type: "get",
					headers: {
						"token": localStorage.getItem("token")
					},
					success: function(data) {
						_this.levels = data.list;
					}
				})
			},
			selectPriority: function() {
				var _this = this;
				$.ajax({
					url: "http://localhost/buttonStatement/bugpriority",
					type: "get",
					headers: {
						"token": localStorage.getItem("token")
					},
					success: function(data) {
						_this.prioritys = data.list;
					}
				})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.page.current = 1;
				this.page.size = val;
				var _this = this;
				$.ajax({
					url: "http://localhost/bugList/select",
					type: "get",
					headers: {
						"token": localStorage.getItem("token")
					},
					data: {
						"pageNum": _this.page.current,
						"pageSize": _this.page.size
					},
					dataType: "json",
					success: function(data) {
						console.log(data);
						_this.page = data.obj;
						_this.page.records = data.list;
						_this.tableData = data.list;
					}
				});
			},
			handleCurrentChange(val) {
				this.page.current = val;
				console.log(`当前页: ${val}`);
				var _this = this;
				$.ajax({
					url: "http://localhost/bugList/select",
					type: "get",
					headers: {
						"token": localStorage.getItem("token")
					},
					data: {
						"pageNum": _this.page.current,
						"pageSize": _this.page.size
					},
					dataType: "json",
					success: function(data) {
						console.log(data);
						_this.page = data.obj;
						_this.page.records = data.list;
						_this.tableData = data.list;
					}
				});
			},
			insertBug: function() {
				console.log(this.value1);
				this.form.pstartetime = this.startAndEndTime[0];
				this.form.pendtime = this.startAndEndTime[1];
				var _this = this;
				console.log(this.form);
				$.ajax({
					url: "http://localhost/bugList/insert",
					type: "post",
					headers: {
						"token": localStorage.getItem("token")
					},
					data: _this.form,
					success: function(data) {
						if (data.code == '0003') {
							alert(data.message);
							_this.selectAllBugs();
						} else {
							alert(data.message);
						}
					}
				});
			},
			changeValue: function(value) {
				this.updateform.bugId = value.bugId;
				this.updateform.bugName = value.bugName;
				this.updateform.projectName = value.projectName;
				this.updateform.bugDetail = value.bugDetail;
				this.updateform.bugClassify = value.bugClassify;
				this.updateform.degree = value.degree;
				this.updateform.bugPriority = value.bugPriority;
				this.updateform.bugId = value.bugId;
				this.updateform.ptime = value.ptime;
				this.upStartAndEndTime = value.startAndEndTime;
				console.log(this.updateform);
			},
			updateBug: function(bugId) {
				this.updateform.pstartetime = this.upStartAndEndTime[0];
				this.updateform.pendtime = this.upStartAndEndTime[1];
				console.log(this.updateform);
				var _this = this;
				$.ajax({
					url: "http://localhost/bugList/update",
					type: "post",
					headers: {
						"token": localStorage.getItem("token")
					},
					data: _this.updateform,
					success: function(data) {
						if (data.code == '0006') {
							alert(data.message);
							_this.selectAllBugs();
						} else {
							alert(data.message);
						}
					}
				});
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				console.log(this.multipleSelection);
			},
			deletebug:function(){
				for(var i = 0; i < this.multipleSelection.length; i++){
					this.deleteparam.push(this.multipleSelection[i].bugId);
				}
				var _this = this;
				$.ajax({
					url:"http://localhost/bugList/delete",
					type:"delete",
					data:{"bugIds":_this.deleteparam},
					dataType:"json",
					success:function(data){
						if(data.code == '0005'){
							alert(data.message);
							_this.selectAllBugs();
						}else{
							alert(data.message);
						}
					}
				})
			}
		},
		created: function() {
			this.selectAllBugs();
			this.selectProject();
			this.selectState();
			this.selectClassify();
			this.selectLevels();
			this.selectPriority();
		}
	};
</script>

<style scoped="scoped">
	#bugList {
		width: 90%;
		background-color: silver;
		margin: 50px auto;
		border-radius: 5px;
		padding: 20px 50px;
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	#anoselect {
		color: #606266;
		line-height: 36px;
		margin-left: 20px;
		float: left;
	}

	#selectTime {
		color: #606266;
		line-height: 36px;
		margin-left: 20px;
		float: left;
	}

	#startTime {
		height: 30px;
		margin-left: 20px;
		float: left;
		margin-top: 3px;
	}

	#symbol {
		float: left;
		line-height: 36px;
		text-align: center;
		margin-left: 20px;
	}

	#project {
		float: left;
		color: #606266;
		margin-left: 30px;
		line-height: 36px;
	}

	.selectBox {
		float: left;
		margin-left: 10px;
		margin-top: 3px;
		width: 80px;
		height: 30px;
		border: none;
		color: #606266;
		border-radius: 3px;
	}

	#status {
		float: left;
		color: #606266;
		margin-left: 30px;
		line-height: 36px;
	}

	#btn1 {
		margin-left: 20px;
		margin-top: 4px;
	}

	#btn2 {
		margin-left: 20px;
		margin-top: 4px;
	}

	#btn3 {
		margin-left: 20px;
		margin-top: 4px;
	}

	#startTime {
		width: 130px;
		float: left;
	}

	#startTime>>>.el-date-editor {
		width: 130px !important;
	}

	#endTime>>>.el-date-editor {
		width: 130px !important;
	}

	#endTime {
		margin-left: 10px;
		width: 130px;
		float: left;
	}
</style>
